<!-- 键盘 -->
<template>
  <div class="keyboard">
    <div class="row ctrl-row">
      <div class="col">
        <div class="btn" @click="handlerClickBtnCaps">
          <IconCapitalArrow v-if="!bseStore.caps" />
          <IconLowercaseArrow v-else />
        </div>
        <div class="btn" @click="handlerClickBtnPrompt">
          <IconPrompt />
        </div>
      </div>
      <div class="col">
        <div class="btn" @click="handlerClickBtnClear"><IconEraser /></div>
        <div class="btn" @click="hendlerClickBtnDelete"><IconBackspace /></div>
        <div class="btn" @click="hendlerClickBtnSubmit"><IconConfirm /></div>
      </div>
    </div>
    <div class="row" v-for="(item, idx) in keyRow" :key="idx">
      <KeyCell v-for="(item2, idx2) in item.slice()" :key="idx2" :item-data="item2" @click-key-cell="handlerClickKeyCell" />
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, defineExpose } from 'vue'
import KeyCell from './KeyCell.vue'
import { useBaseStore } from '../stores/base.ts'
import IconCapitalArrow from '../svg/IconCapitalArrow.vue'
import IconLowercaseArrow from '../svg/IconLowercaseArrow.vue'
import IconPrompt from '../svg/IconPrompt.vue'
import IconEraser from '../svg/IconEraser.vue'
import IconBackspace from '../svg/IconBackspace.vue'
import IconConfirm from '../svg/IconConfirm.vue'

const bseStore = useBaseStore()
const keyRow = ref(['QWERTYUIOP', "ASDFGHJKL'", 'ZXCVBNM,.?', ' '])
const emits = defineEmits(['clickKey', 'clickBtnPrompt', 'clickBtnSubmit'])
const iptVal = ref<string[]>([])

const handlerClickKeyCell = (val = '') => {
  bseStore.caps = false
  iptVal.value.push(val)
  exportValue()
}
/**
 * 大小写切换
 */
const handlerClickBtnCaps = () => {
  bseStore.caps = !bseStore.caps
}

/**
 * 清空已输入内容
 */
const handlerClickBtnClear = () => {
  iptVal.value = []
  exportValue()
}

/**
 * 删除一个
 */
const hendlerClickBtnDelete = () => {
  iptVal.value.pop()
  exportValue()
}

/**
 * 返回输入值
 */
const exportValue = () => {
  emits('clickKey', iptVal.value.join(''))
}

/**
 * 提示消息
 */
const handlerClickBtnPrompt = () => {
  emits('clickBtnPrompt')
}

const hendlerClickBtnSubmit = () => {
  emits('clickBtnSubmit')
}

defineExpose({
  clearInterValue: handlerClickBtnClear,
})
</script>

<style lang="scss" scoped>
.keyboard {
  border-top: 1px solid #000;
  padding: 0.05rem;

  body.shade & {
    border-color: #fff;
  }

  .row {
    display: flex;

    .col {
      flex: 1;
      display: flex;

      &:first-child {
        justify-content: flex-start;
      }

      &:last-child {
        justify-content: flex-end;
      }
    }

    .ctrl-btn {
      font-size: 0.3157894737rem;
      border: 1px solid #000;
      padding: 0.08rem;
      line-height: 1;
      border-radius: 0.07017543859649122rem;
      user-select: none;
      box-sizing: border-box;

      & + .ctrl-btn {
        margin-left: 0.1rem;
      }

      body.shade & {
        border-color: #fff;
      }
    }

    &.ctrl-row {
      border-bottom: 1px solid #000;
      padding: 0.05rem 0.05rem 0.1rem;
      margin-bottom: 0.05rem;

      body.shade & {
        border-color: #fff;
      }
    }
  }
}
</style>
